<template>
    <div>
        <!-- 登录输入框 -->
        <div v-if="!token">
            <div class="user">
                <header class="flex"> <img src="../assets/users.png" alt=""></header>
                <main>
                    <div class="users flex top">
                        <i class="iconfont icon-user"></i>
                        <input type="text" v-model="info.account" placeholder="请输入账号">
                    </div>
                    <div class="users flex top">
                        <i class="iconfont icon-password"></i>
                        <input type="password" v-model="info.password" placeholder="请输入密码">
                    </div>
                </main>
            </div>
            <!-- 登录按钮 -->
            <div class="login flex">

                <button @click="toLogin">登录</button>
            </div>
        </div>
        <div class="center" v-else>
            <header> <img src="../assets/users.png" alt=""></header>
            <div>用户名：{{ user }}</div>
            <button class="logout" @click="logout">退出</button>
        </div>.
        <!-- 底部导航栏 -->
        <TabBar></TabBar>
    </div>
</template>
<script>
import TabBar from '../components/Tabbar.vue'
// import axios from 'axios'
import { login } from '@/api/api'
export default {
    components: {
        TabBar
    },
    data() {
        return {
            info: {
                account: '',
                password: '',
                role: 3
            },
            token: localStorage.getItem('token'),
            user: localStorage.getItem('user')
        }
    },
    methods: {
        // 登录
        toLogin() {
            login(this.info)
                .then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.$toast.success('登录成功')
                        this.$router.push('/home')
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('user', this.info.account)
                    } else {
                        this.$toast.fail(res.msg)
                    }
                })
        },
        // 退出
        logout() {
            this.$toast.success('退出成功')
            localStorage.clear()
            location.reload()
        }
    }
}
</script>

<style  scoped>
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.logout {
    width: 40%;
    background-color: #11191f;
    height: 50px;
    line-height: 50px;
    border-radius: 8px;
    color: #fff;
    margin-top: 20px;
}

.center {
    margin-top: 50px;
    text-align: center;
}

.top {
    margin-top: 20px;
}

header img {
    width: 30%
}

main i {
    font-size: 30px;
    margin-right: 10px;
}

main input {
    width: 70%;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    text-indent: 1em;
    border: 1px solid #c8c9cc;
}

.login button {
    width: 80%;
    background-color: #11191f;
    height: 50px;
    line-height: 50px;
    border-radius: 8px;
    color: #fff;
}
</style>